myapp.views.Viewport = Ext.extend(Ext.Panel, {
    fullscreen: true,
    layout: 'card',
    cardSwitchAnimation: 'slide',
    /*items:  [
             {
        	    html: "<h1>welcome</h1>",
        	    styleHtmlContent: true,

             }
            ],*/
    initComponent: function () {
        console.log('Viewport inited 2');
        Ext.apply(myapp.views, {
        	index: new myapp.views.Index(),
	        credits: new myapp.views.Credits(),
	        nearMe: new myapp.views.NearMe(),
	        museumsList: new myapp.views.MuseumsList(),
	        museumDetail: new myapp.views.MuseumDetail(),
	        museumDetailMap: new myapp.views.MuseumDetailMap()
        });
        //put instances of cards into viewport
	    Ext.apply(this, {
	        items: [
			        myapp.views.index,
			        myapp.views.credits,
	                myapp.views.nearMe,
			        myapp.views.museumsList,
			        myapp.views.museumDetail,
			        myapp.views.museumDetailMap
	            ]
	    });
	    myapp.views.Viewport.superclass.initComponent.apply(this, arguments);
	},
	// TODO
	// took from http://www.sencha.com/forum/showthread.php?141963-Orientation-change-issue-using-Sencha-Touch-and-PhoneGap
	// and also added override in app.js - don't think working
	listeners: {
        orientationchange: function(){
            window.scrollTo(0,0);
            Ext.getCmp('viewport').doLayout();
            //this references the viewport component. change this to
            //your own reference
        }
    } 
});